<template>
	<div class="bg-color-white">
		<div class="fixed" :class="{'fixed-shadow': suspension}">
			<div class="main-header">
				<div class="main-header-width">
					<span><router-link tag="a" :to="{name: 'Home'}">欢迎来到农特选货商城</router-link></span>
					<ul class="main-top-info">
						<li><router-link tag="a" :to="{name: 'Center'}">{{account}}</router-link></li>
						<li><router-link tag="a" :to="{name: 'Order'}"><i class="header-order-icon"></i>订单</router-link></li>
						<li>
							<router-link tag="a" :to="{name: 'Wallet'}"><i class="header-order-icon header-wallet-icon"></i>我的钱包</router-link>
						</li>
						<li style="border: 0;">
							<router-link tag="a" :to="{name: 'Document'}"><i class="header-order-icon header-document-icon"></i>功能文档</router-link>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {mapActions, mapState} from 'vuex'

	export default{
		data(){
			return {  			
	    		keyword: '', // 关键字
	    		selectType: 1,// 搜索类型
	    		suspension: false
	    	}  		
		},
		watch: {
          // 如果路由有变化，会再次执行该方法
         	"$route": "routeChange"
        },
        created(){
        	this.routeChange();
        },
		computed: {
			...mapState([
                'account'
            ]),
		},
		mounted(){
			window.addEventListener('scroll', this.handleScroll);
		},
		methods: {

		    handleScroll: function(){
		    	var h = document.documentElement.scrollTop || document.body.scrollTop;
		    	if(h > 0){
	    			this.suspension = true;
	    		}else{
	    			this.suspension = false;
	    		}
		    },
		    routeChange(){
		    	var url = window.location.href;
				var strs = url.split("/");
				var str = strs[strs.length - 1];
				if(str == 'wallet'||str == 'receipt'){
					this.isActive.two = true;
					this.isActive.one  = false;
					this.isActive.three = false;
				}else if(str == 'center'){
					this.isActive.two = false;
					this.isActive.one  = false;
					this.isActive.three = true;
				}else if(str == 'order' || str == 'orderdetail'){
					this.isActive.two = false;
					this.isActive.one  = true;
					this.isActive.three = false;
				}
		    }
		}
	}
</script>